<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
  <link rel="stylesheet" href="../../styles/common.css"/>
  <link rel="stylesheet" href="../../styles/page.css"/>
</head>
<body>
  <div class="dashboard-container" id="employee-app">
    <div class="container">
      <div class="tableBar">
        <el-input v-model.trim="input" placeholder="输入员工姓名关键字搜索" style="width: 250px"
                  clearable @keyup.enter.native="handleQuery">
          <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="handleQuery"></i>
        </el-input>
        <el-button type="primary" @click="addEmployeeHandle">+ 添加员工</el-button>
      </div>
      <el-table :data="tableData" class="tableBox" height="425">
        <el-table-column label="员工姓名" align="center">
          <template slot-scope="scope">
            {{scope.row.username}}{{scope.row.role === 1 ? '（管理员）' : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="account" label="帐号" align="center"></el-table-column>
        <el-table-column prop="phoneNumber" label="手机号码" align="center"></el-table-column>
        <el-table-column label="帐号状态" align="center">
          <template slot-scope="scope">
            {{scope.row.status === 1 ? '正常' : '已禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="currAccount==scope.row.account" type="text" disabled>编辑</el-button>
            <el-button v-else type="text" class="blueBug" @click="editEmployeeHandle(scope.row.id)">
              编辑
            </el-button>
            <el-button v-if="currAccount==scope.row.account" type="text" disabled>禁用</el-button>
            <el-button v-else type="text" class="delBut non" @click="statusHandle(scope.row)">
              {{scope.row.status === 1 ? '禁用' : '启用'}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        :current-page.sync="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="../../js/request.js"></script>
  <script src="../../api/employee.js"></script>
  <script>
    new Vue({
      el: '#employee-app',
      data() {
        return {
          input: '',
          counts: 0,
          page: 1,
          pageSize: 10,
          tableData: [],
          currAccount: ''
        }
      },
      computed: {},
      created() {
        this.getPageInfo()
        this.getCurrEmpAccount()
        this.init()
      },
      methods: {
        init() {
          const params = {
            page: this.page,
            pageSize: this.pageSize,
            username: this.input ? this.input : undefined
          }
          getEmployeePageApi(params).then(res => {
            this.tableData = res.data.records
            this.counts = res.data.total
          }).catch(error => {
            this.$message.error(error.message)
          })
        },
        // 获取当前员工账号
        getCurrEmpAccount() {
          getCurrEmpApi().then(res => {
            this.currAccount = res.data.account
          }).catch(error => {
            this.$message.error(error.message)
          })
        },
         // 添加员工
        addEmployeeHandle() {
          window.parent.menuHandle({
            id: '1',
            url: '/backend/page/employee/add.html',
            name: '添加员工'
          }, true)
        },
        // 修改员工
        editEmployeeHandle(id) {
          window.parent.menuHandle({
            id: '1',
            url: `/backend/page/employee/edit.html?id=${id}`,
            name: '修改员工'
          }, true)
        },
        // 员工状态修改
        statusHandle(row) {
          let id = row.id
          let status = row.status
          this.$confirm('确定调整该帐号状态？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            editEmployeeApi({id, status: status ? 0 : 1}).then(res => {
              this.$message.success('帐号状态更改成功！')
              this.handleQuery()
            }).catch(error => {
              this.$message.error(error.message)
            })
          }).catch(() => {})
        },

        handleQuery() {
          this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
          this.pageSize = val
          this.init()
          this.savePageInfo()
        },
        handleCurrentChange(val) {
          this.page = val
          this.init()
          this.savePageInfo()
        },
        savePageInfo() {  // 保存页面配置，使得刷新不会重置
          sessionStorage.setItem("pageInfo", JSON.stringify({
            input: this.input,
            page: this.page,
            pageSize: this.pageSize
          }))
        },
        getPageInfo() {
          let pageInfo = sessionStorage.getItem("pageInfo")
          if (pageInfo) {
            pageInfo = JSON.parse(pageInfo)
            this.input = pageInfo.input
            this.page = pageInfo.page
            this.pageSize = pageInfo.pageSize
          }
        }
      }
    })
  </script>
</body>
</html>